<template>
	<view>
		<u-popup v-model="show" mode="center" width="600" borderRadius="10">
			<view class="pt40 fs32 tc">{{title}}</view>
			<view class="p30 pb0 flex">
				<view class="flex1">
					<u-input v-model="content" @blur="content=$event" :type="type" :maxlength="maxlength"
						:placeholder="placeholder" border :focus="show" @confirm="confirm" />
				</view>
				<view class="">
					<slot name="right"/>
				</view>
			</view>
			<view class="flex">
				<view class="flex1 p30">
					<u-button type="warning" plain ripple
						@click="show=false,$emit('cancel',content)">{{cancelText}}</u-button>
				</view>
				<view class="flex1 p30">
					<u-button type="warning" :disabled="confirmDisabled||!content" ripple
						@click="confirm">{{confirmText}}</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	/**
	 * modal 弹出输入框
	 * @property {String} confirm-text 确认按钮的文字
	 * @property {String} cancel-text 取消按钮的文字
	 * @property {String} default-value 提供的默认选中的下标，见官网说明
	 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker(默认true)
	 * @property {String Number} z-index 弹出时的z-index值(默认10075)
	 * @property {String} value-name 自定义list数据的value属性名 1.3.6
	 * @property {String} label-name 自定义list数据的label属性名 1.3.6
	 * @property {String} child-name 自定义list数据的children属性名，只对多列联动模式有效 1.3.7
	 * @property {String Number} maxNum 自定义列数
	 * @event {Function} confirm 点击确定按钮，返回当前选择的值
	 * @event {Function} cancel 点击取消按钮，返回当前选择的值
	 * @example <auto-select ref="list" :list="list" />
	 */
	export default {
		name: "modal",
		props: {
			// 顶部标题
			placeholder: {
				type: String,
				default: '请输入'
			},
			// 顶部标题
			title: {
				type: String,
				default: '请输入'
			},
			// 取消按钮的文字
			cancelText: {
				type: String,
				default: '取消'
			},
			// 确认按钮的文字
			confirmText: {
				type: String,
				default: '确认'
			},
			// 确认按钮的文字
			confirmDisabled: {
				type: Boolean,
				default: false
			},
			// 确认按钮的文字
			type: {
				type: String,
				default: 'text'
			},
			maxlength: {
				type: String,
				default: '-1'
			},
			value: {
				default: ''
			},
			close: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				show: false,
				content: '',
			};
		},
		methods: {
			open() {
				this.show = true
				this.content = this.value || ''
			},
			cancel() {
				this.show = false
			},
			confirm() {
				if (this.confirmDisabled || !this.content) return
				this.$emit('confirm', this.content)
				if (this.close) this.cancel()
			}
		}
	}
</script>

<style lang="scss">

</style>